import React from 'react'
import { Box } from '$components';
import './style.less';
import { useFsRequest } from '$utils';

function WaterQualityMonitoring(props) {
    const data = [
        { name: '溶解氧', value: 10, unit: 'mg/L' },
        { name: 'pH值', value: 7.4, unit: '' },
        { name: '电导率', value: 1000, unit: 'μS/cm' },
        { name: '浊度', value: 0.6, unit: 'NTU' },
        { name: '温度', value: 26, unit: '℃' },
    ]
    
    const colors = [
        { linearGradientFrom: '#24DDFA', linearGradientTo: '#267FD3' },
        { linearGradientFrom: '#F8C86B', linearGradientTo: '#F8A81D' },
        { linearGradientFrom: '#7EE6FB', linearGradientTo: '#5BBEF9' },
        { linearGradientFrom: '#59D4D4', linearGradientTo: '#3FBCBC' },
        { linearGradientFrom: '#A183E0', linearGradientTo: '#8A66D4' }
    ];
    
    return <Box title={"水质监测"}>
        <div className="water-quality-list" style={{ padding: '15px' }}>
            {data.map((item, index) => (
                <div key={item.name} className="water-quality-item flex-row flex-item-center flex-content-between" 
                    style={{ 
                        background: "linear-gradient(90deg, #002C6C 0%, #1e293800 100%)", 
                        height: 36, 
                        marginBottom: 12, 
                        padding: '0 15px',
                        borderRadius: '4px'
                    }}>
                    <div className="flex-row flex-item-center">
                        <div style={{ 
                            width: 8, 
                            height: 8, 
                            borderRadius: '50%', 
                            background: colors[index]?.linearGradientFrom,
                            marginRight: 10
                        }} />
                        <div style={{ 
                            color: '#E6EFFF', 
                            fontSize: 16 
                        }}>{item.name}</div>
                    </div>
                    <div style={{ 
                        color: colors[index]?.linearGradientFrom, 
                        fontSize: 18,
                        fontFamily: 'DINMediumItalic'
                    }}>{item.value}{item.unit}</div>
                </div>
            ))}
        </div>
    </Box>
}

export default WaterQualityMonitoring;


